
Vue.component2('a_1_0_2_0_0_lines', {  
    template: `
        <div class="a_1_0_2_0_0_lines test" @click="handle_click">
        <span :style="'padding-left: '+data._space_+'px;'":class="{'icon iconfont':data.true,'icon-right':data.close,'icon-down':data.close==false}"></span><span>{{data.name}}</span>
        </div>
`,
data(){
    return{
        data:{
            true:true,
            false:false,
            close:true,
            name:"",
            _space_:0,
        }
    }
},
methods:{
    handle_click:function(event){
        try{
            this.data.click_handle(this.data.path,this.data.close);
        }catch{}
    }
}
})
Vue.component2('a_1_0_2_0_0', {  
    template: `
        <div class="a_1_0_2_0_0_base" ref="father"v-show="show_flag">
        </div>
`,  
  data() {
      return {
        show_flag:true,
        init_flag:0,
        now_select:"-1",
        refresh:"1",/*用来刷新组件*/
        data:{
            data:{},
            close:true,
            fast_data:{}, //快速访问dom
            fast_vue_data:{},//快速访问vue
            open_dict:{},//节点展开的状态保存
            open_dict_init:false,//open_dict初始化
            // {
            //     0:{
            //         close:true,
                        // open_num:
            //         dict:{

            //         }
            //     }
            
            // }
            
        },
      };
  },
  methods:{
    insertAfter:function(newNode, referenceNode, parentNode) {  
        // 将 newNode 插入到 referenceNode 之后  
        if (referenceNode.nextSibling) {  
            // /* console.log("?")*/
            parentNode.insertBefore(newNode, referenceNode.nextSibling);  
        } else {  
            // console.log("？?")
            // 获取父元素的第一个子节点  
            let firstChild = parentNode.firstChild;  
              
            // 在第一个子节点之前插入新节点  
            if (firstChild) {  
                parentNode.insertBefore(newNode, firstChild);  
                // parentNode.appendChild(newNode);  
            } else {  
                // 如果没有子节点，直接添加新节点  
                parentNode.appendChild(newNode);  
            }
        }  
    },
    handle_click:function(event,flag=null){

      // event.target 是触发点击事件的元素  
      let clickedElement = event.target;  
      if(!flag){event.stopPropagation();}//阻止父级
    }
  },
  mounted:function(){
  //初始化
  _this.init=function(){
    _this.data.open('');
    _this.init_flag=1;
  }
  _this.data.click_handle=async function(path,close_flag){
    if(close_flag==true){
       await _this.data.open(path);
    }else{
        await _this.data.close(path);
    }
  }
  //展开
  _this.data.set_open=function(__this){
    // console.log("设置为展开",__this)
    __this.$refs.ref_obj.data.close=false;
  }
  //闭合
  _this.data.set_close=function(__this){
    __this.$refs.ref_obj.data.close=true;
  }
  _this.data.copy=function(copy_data){
    let res={};
    let lst=[[copy_data,res]];
    while (lst.length){
        let item=lst.pop();
        let new_data=item[0];
        let new_res=item[1];
        new_res.close=true;
        if (new_data.dict){
            // console.log("...")
            new_res.num=Object.keys(new_data.dict).length+1;
            for (let key in new_data.dict){
                new_res[key]={};
                new_res2=new_res[key];
                lst.push([
                    new_data.dict[key],
                    new_res2

                ])
            }
        }else{
            new_res.num=1;
        }
    }
    console.log("end")
    return res
  }
  _this.sleep=function sleep(ms) {  
    return new Promise(resolve => setTimeout(resolve, ms));  
}  
//   copy({dict:{1:{dict:{1:{},2:{},3:{},4:{dict:{1:{}}}}}}})
  //点击
  //展开目录
  _this.data.open=async function(path){
    
    //初始化节点的打开信息 以及当前节点的打开数量
    if (_this.data.open_dict_init==false){
        //初始化父节点到快速查找对象中
        _this.data.fast_data[null]=_this.$refs.father;
        _this.data.fast_data['']=_this.$refs.father;
        _this.data.open_dict=_this.data.copy(_this.data.data)//初始化父dom到快速查找字典中
        _this.data.open_dict_init=true;
        console.log("open_dict",_this.data.open_dict);
    }
    let open_dct=_this.data.open_dict;
    let sort_lst=[];//要排序的列表
    let sort_dct={};
    let father_dom__=_this.$refs.father;
    let father_dom=_this.data.fast_data[path];
    //打开当前dom
    open_dct.close=false;
    if(path!=''&&path!=null){
        // ttime3(_this.data.fast_vue_data[path],'ref_obj',_this.data.set_open,func2_lst=[_this.data.fast_vue_data[path]]);//打开
    }
    // console.log("father_dom__",father_dom__)
    // 创建一个 DocumentFragment  
    // let fragment = document.createDocumentFragment();  
    // console.log("开始展开,展开路径:",path)
    //通过path解析路径
    let obj=_this.data.data;
    let path_lst=path.split(".");
    let space=(path_lst.length-1)*8;
    if (path==''){space=-8}
    // console.log("now space:",path_lst,space)
    if (path==''){path_lst=[]}
    for (let i=0;i<path_lst.length;i++){
        obj=obj.dict[path_lst[i]];
        open_dct=open_dct[path_lst[i]];
    
    }
    // console.log("open 1",obj)
    //获取当前目录的展开层数
    let max_open_type=null;
    if (!obj.base_info){
        max_open_type=1;//默认展开1层
    }else{
        let open_type=obj.base_info.open_type;
        if(open_type==-1){
            max_open_type=99999;//-1 表示展开99999层
        }
        else if(open_type==undefined || open_type==null){
            max_open_type=1;//默认展开1层
        }
        else{
            max_open_type=open_type;//自定义展开层数
        }
    }
    // console.log("open 2")
    //非递归展开
    // let lst=[
        
    // ];
    // let dct={};
    // while(lst.length){

    // }







    let lst=[{
                "path":path,//父节点的路径
                "insert_id":null,//要插入节点的节点id
                fast_obj:obj,//父节点的 的对象
                'space':space,//缩进位数
                'open_num':0,//当前展开层数
                'open_dct':open_dct
            }];
            // console.log("open 3")
    while (lst.length){
        let temp_lst=null;temp_lst_length=null;now_id=null;new_fast_obj=null;new_father_path=null;
        let new_dom=null;new_vue=null;t_deepcopy_data=null;new_fast_obj_base_info=null;vue_name=null;
        let lst_item=lst.pop();
        let new_path=lst_item['path'];//父节点key 用于获取父节点dom
        let fast_obj=lst_item['fast_obj'];//当前节点的dict
        let now_dict=fast_obj.dict;//当前节点下的子节点的dicts
        let insert_id=lst_item['insert_id'];
        let now_open_num=lst_item['open_num'];//当前展开层数
        let now_open_dct=lst_item['open_dct'];
        // console.log("open 4")
        //将当前节点 插入dom中
        if (insert_id==null ){//如果是要展开的节点 那么不创建dom，仅赋值变量
            // console.log("open 5-1")
            if(path==''){
                //父节点快速查找路径
                new_father_path=null;}
            else{new_father_path=path}
            // console.log("open 5-12")
            new_fast_obj=fast_obj;
        }
        else{
            // console.log("open 5-2")
            new_fast_obj=now_dict[insert_id];
            new_fast_obj_base_info=new_fast_obj.base_info;
            // console.log("open 5-22")
            if (new_fast_obj_base_info){
                vue_name=new_fast_obj_base_info.vue_name||'a_1_0_2_0_0_lines';//要渲染的vue模板名称
                t_deepcopy_data=new_fast_obj_base_info.deepcopy_data||{};
            }else{
                vue_name="a_1_0_2_0_0_lines";
                t_deepcopy_data={};
            }
            // console.log("open 5-23")
            //获取当前节点
            if(new_path==null){
                // if (path==null){
                //     new_father_path=insert_id+'';
                // }else{
                    new_father_path=insert_id+'';
                // }
            }else{
                new_father_path=new_path+'.'+insert_id;
            }

            //新建一个dom
            new_dom=document.createElement(vue_name);
            //设置dom属性 ref值为ref_obj
            new_dom.setAttribute('ref', 'ref_obj');
            t_deepcopy_data['_space_']=lst_item.space;//退格
            t_deepcopy_data['path']=new_father_path;
            t_deepcopy_data['click_handle']=_this.data.click_handle;
            new_dom.setAttribute(':deepcopy_data',"deepcopy_data");//初始化vue模板的参数
            new_dom.setAttribute('dom_path',new_father_path);//初始化vue模板的参数

            sort_lst.push(new_father_path);
            sort_dct[new_father_path]={'el':new_dom,data:{true:true,false:false,null:null,deepcopy_data:t_deepcopy_data}}
            //检查当前节点是否处于展开状态 如果未展开 则跳过添加子节点
            if(now_open_dct.close==false){
                t_deepcopy_data['close']=false;
            }
        // console.log("当前处理:",new_path,insert_id,new_father_path)
            // console.log("open 5")
            //开始渲染
            //获取到父节点dom
    //      2   father_dom=_this.data.fast_data[new_path];
    //         //插入dom数据
    //    2     _this.insertAfter(new_dom,father_dom,_this.$refs.father);
    //         // console.log("开始渲染")
    //         //创建vue对象 使得组件被渲染
    //    2     new_vue=new Vue({'el':new_dom,data:{true:true,false:false,null:null,deepcopy_data:t_deepcopy_data}});
            // console.log("渲染end")
            //加入快捷搜索路径
            // _this.data.fast_data[new_father_path]=new_vue.$el;
            // _this.data.fast_vue_data[new_father_path]=new_vue;
        }

        //检查当前节点是否处于展开状态 如果未展开 则跳过添加子节点
        if(now_open_dct.close==true){continue}
        // // if ()
        // //如果当前达到展开上限 则停止展开后续的子节点
        // if (now_open_num>=max_open_type){
        //     continue
        // }else{//设置为展开状态
        //     _this.data.fast_vue_data[new_father_path];
        //     if(new_father_path!=null){
        //         // console.log("_this.data.fast_vue_data[new_father_path],",_this.data.fast_vue_data[new_father_path],_this.data.fast_vue_data)
        //         ttime3(_this.data.fast_vue_data[new_father_path],'ref_obj',_this.data.set_open,func2_lst=[_this.data.fast_vue_data[new_father_path]]);//打开

        //     }
        // }
        // console.log("fast_obj.dict && Object.keys(fast_obj.dict).length",fast_obj.dict && Object.keys(fast_obj.dict).length,fast_obj.dict)

        //遍历子节点 将子节点添加进待处理队列中
        if (fast_obj.dict && Object.keys(fast_obj.dict).length){
            // temp_lst=(Object.keys(fast_obj.dict).map(Number)).sort((a,b)=>b-a);
            temp_lst=(Object.keys(fast_obj.dict).map(Number)).sort((a,b)=>b-a);
            // console.log("temp_lst",temp_lst)
            temp_lst_length=temp_lst.length;
            if (!temp_lst_length){continue}
        }else{continue}
        //遍历子节点 倒序添加进处理队列
        // for (let i=temp_lst_length-1;i>=0;i--){
        for (let i=0;i<temp_lst_length;i++){
            now_id=temp_lst[i];
            lst.push({
                path:new_father_path,
                insert_id:now_id,
                fast_obj:new_fast_obj,
                space:lst_item.space+8,
                'open_num':now_open_num+1,//当前展开层数
                open_dct:open_dct[now_id]
            })
        }
        // console.log("temp_lst加入队列中:",temp_lst,JSON.parse(JSON.stringify(lst)))


    }
    // sort_lst.sort();//排序 ['1.1', '1.1.1', '1.2', '2.1', '2.2']
    let sort_lst2=[];
    // let sort_lst2=sort_lst;
    // console.log("sort_lst",sort_lst)
    while (sort_lst.length){ sort_lst2.push(sort_lst.pop());}
    // console.log("sort_lst2",sort_lst2)
    let count_max=20;count_start=0;
    let fragment = document.createDocumentFragment(); //创建虚拟节点
    let next_dom=father_dom;
    let next_dom2=father_dom;
    while (sort_lst2.length){
        //等待页面刷新完成
        if ((count_start++)%count_max==0){
            _this.insertAfter(fragment,next_dom,father_dom__);
            await _this.sleep(20);
            fragment = document.createDocumentFragment(); //创建虚拟节点
            next_dom=next_dom2;
            // console.log("next_dom",next_dom)
            // father_dom__.appendChild(fragment);

        }
        let new_path=sort_lst2.pop();
        let vue_dct=sort_dct[new_path];
        // console.log("newpath",new_path,vue_dct)
        let new_dom=vue_dct.el;
        // _this.insertAfter(new_dom,fragment,fragment);
        fragment.appendChild(new_dom);
                //  father_dom__.appendChild(new_dom);
                 
                // _this.insertAfter(new_dom,father_dom,father_dom__);
        new_vue=new Vue(vue_dct);
        window.test_vue=new_vue;
        _this.data.fast_data[new_path]=new_vue.$el;
        next_dom2=new_vue.$el;
        _this.data.fast_vue_data[new_path]=new_vue;
    }
    
    _this.insertAfter(fragment,next_dom,father_dom__);
    // console.log("sort_lst",sort_lst);
    // console.log("...",fragment)
  }
//   var nodesToRemove = Array.from(document.querySelectorAll('.some-class')); // 获取要删除的节点  
// var batchSize = 20; // 每次删除的节点数量，可以根据需要进行调整  
// var index = 0; // 当前处理的节点索引  
  
// function removeNodesInBatches() {  
//     var start = index;  
//     var end = Math.min(index + batchSize, nodesToRemove.length);  
//     for (var i = start; i < end; i++) {  
//         nodesToRemove[i].remove(); // 删除节点  
//     }  
//     index = end; // 更新索引  
  
//     // 如果还有节点未删除，则请求下一帧继续删除  
//     if (index < nodesToRemove.length) {  
//         requestAnimationFrame(removeNodesInBatches);  
//     } else {  
//         // 所有节点都已删除，可以在这里执行其他操作，如页面刷新（如果需要）  
//         console.log('All nodes removed.');  
//         // location.reload(); // 如果需要刷新页面，可以取消注释这行  
//     }  
// }  
  
// // 开始删除操作  
// requestAnimationFrame(removeNodesInBatches);
  //收缩目录
  _this.data.close=async function(path){
    parent.removeChild(nodeA.nextSibling); // 这里直接删除也可以，但为演示添加到数组后再删除  
  }
} }
);
// 
